<template>
  <div id="pieChart"></div>
</template>
<script setup>
import * as echarts from 'echarts'
const props = defineProps({
  listData: {
    required: true,
    type: Object,
    default: {}
  }
})
const { listData } = toRefs(props)

onMounted(() => {
  watch(()=>props.listData,()=>{
    let myChart = echarts.init(document.getElementById("pieChart"));
    myChart.setOption( {
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "center",
          // doesn't perfectly work with our tricks, disable it
          selectedMode: false,
        },
        color: ["pink"],
        series: [
          {
            name: "灾害评估数量",
            type: "pie",
            radius: ["46%", "60%"],
            center: ["50%", "60%"],
            // adjust the start angle
            startAngle: 230,
            label: {
              show: false,
              formatter(param) {
                // correct the percentage
                return param.name + " (" + param.percent * 2 + "%)";
              },
            },
            itemStyle: {
              normal: {
                color: (list) => {
                  // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
                  var colorList = [
                    {
                      colorStart: "#66FFFF",
                      colorEnd: "#1B7CFF",
                    },
                    {
                      colorStart: "#26CEBA",
                      colorEnd: "#8efaed",
                    },
                    {
                      colorStart: "#FFC069",
                      colorEnd: "#fadfba",
                    },
                    {
                      colorStart: " #FD6865",
                      colorEnd: "#f8b2b1",
                    },
                  ];
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      //左、下、右、上
                      offset: 0,
                      color: colorList[list.dataIndex]["colorStart"],
                    },
                    {
                      offset: 1,
                      color: colorList[list.dataIndex]["colorEnd"],
                    },
                  ]);
                },
              },
            },
            data: [
              { value: listData.value.disasterNum, name: "" },
              {
                // make an record to fill the bottom 50%
                value: listData.value.disasterNum,
                itemStyle: {
                  // stop the chart from rendering this piece
                  color: "none",
                  decal: {
                    symbol: "none",
                  },
                },
                label: {
                  show: false,
                },
              },
            ],
          },
        ],
      })
      window.onresize = function () { // 自适应大小
        myChart.resize();
      };
  },{ deep: true, immediate: true }
  )})
</script>

<style lang="scss" scoped>
#pieChart {
  width: 120px;
  height: 120px;
  margin-left: 10px;
}
</style>
